.Spreadsheet {
  --background-color: white;
  --text-color: black;
  --readonly-text-color: rgb(0 0 0 / 40%);
  --outline-color: #4285f4;
  --outline-background-color: rgb(160 195 255 / 20%);
  --border-color: hsl(2deg 0% 91%);
  --header-background-color: rgb(0 0 0 / 4%);
  --elevation: 0 2px 5px rgb(0 0 0 / 40%);

  position: relative;
  overflow: visible;
  background: var(--background-color);
  color: var(--text-color);
  display: inline-block;
}

.Spreadsheet--dark-mode {
  --background-color: black;
  --text-color: white;
  --readonly-text-color: rgb(255 255 255 / 40%);
  --header-background-color: rgb(255 255 255 / 4%);
  --border-color: hsl(2deg 0% 19%);
}

.Spreadsheet__active-cell {
  position: absolute;
  border: 2px solid var(--outline-color);
  box-sizing: border-box;
}

.Spreadsheet__active-cell--edit {
  background: var(--background-color);
  box-shadow: var(--elevation);
}

.Spreadsheet__table {
  border-collapse: collapse;
  table-layout: fixed;
}

.Spreadsheet__cell,
.Spreadsheet__active-cell {
  cursor: cell;
}

.Spreadsheet__cell {
  outline: none;
}

.Spreadsheet__cell--readonly {
  color: var(--readonly-text-color);
}

.Spreadsheet__cell,
.Spreadsheet__header {
  min-width: 6em;
  min-height: 1.9em;
  height: 1.9em;
  max-height: 1.9em;
  border: 1px solid var(--border-color);
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-align: left;
  box-sizing: border-box;
  user-select: none;
}

.Spreadsheet__header {
  background: var(--header-background-color);
  color: var(--readonly-text-color);
  text-align: center;
  font: inherit;
}

.Spreadsheet__header--selected {
  background: #5f6268;
  color: #fff;
}

.Spreadsheet__header,
.Spreadsheet__data-viewer,
.Spreadsheet__data-editor input {
  padding: 4px;
  box-sizing: border-box;
}

.Spreadsheet__data-viewer--preserve-breaks {
  white-space: pre-wrap;
}

.Spreadsheet__data-editor,
.Spreadsheet__data-editor input {
  width: 100%;
  height: 100%;
}

.Spreadsheet__data-editor input {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  margin: 0;
}

.Spreadsheet__data-viewer--boolean {
  text-align: center;
}

.Spreadsheet__floating-rect {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
}

.Spreadsheet__floating-rect--hidden {
  display: none;
}

.Spreadsheet__floating-rect--selected {
  background: var(--outline-background-color);
  border: 2px var(--outline-color) solid;
}

.Spreadsheet__floating-rect--dragging {
  border: none;
}

.Spreadsheet__floating-rect--copied {
  border: 2px var(--outline-color) dashed;
}
